<script setup>
import { ArrowLeft, ArrowRight, FullScreen } from "@element-plus/icons-vue"
import { useCollapseStore } from "@/stores/collapse.js"
import { useUserStore } from "@/stores/user.js"
import { useRoute, useRouter } from "vue-router"
import { useTagStore } from '../../stores/tags';

import screnful from "screenfull"
const collapseStore = useCollapseStore()
const router = useRouter()
const userStore = useUserStore()
const route = useRoute()
const tagsStore = useTagStore()

const onScreenful = () => {
    if (screnful.isEnabled) {
        screnful.toggle()
    }
}
const onBack = () => {
    console.log("点击了");
    collapseStore.changeCollapse()
}
const onCommand = (c) => {
    console.log(c);
    if (c == "exit") {
        userStore.loginOut().then(res => {
            router.push("/login")
        })
    }
}
const onClose = (tag) => {
    tagsStore.removeTag(tag)
}
const onClick = (tag) => {
    router.push(tag.path)
} 
</script>
<template>
    <el-page-header @back="onBack" class="header" :icon="collapseStore.getCollapse ? ArrowLeft : ArrowRight">
        <template #title>
            {{ collapseStore.getCollapse ? "隐藏" : "显示" }}
        </template>
        <template #content>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">用户</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: route.matched[1].path }">{{
                        route.matched[1].meta.label
                }}</el-breadcrumb-item>
            </el-breadcrumb>
        </template>
        <template #extra>
            <div class="flex items-center">
                <el-icon @click="onScreenful">
                    <FullScreen />
                </el-icon>
                <el-dropdown @command="onCommand">
                    <span class="el-dropdown-link">
                        <el-avatar
                            src="https://himg.bdimg.com/sys/portrait/item/wise.1.53eceb1d.7GJ283xn7Upwzo2fz7rihA.jpg?time=3243" />
                        <span>{{ userStore.getUser.userinfo.username }}</span>
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="center">个人中心</el-dropdown-item>
                            <el-dropdown-item command="exit">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </template>
    </el-page-header>
    <div class="tags">
        <el-tag @click="onClick({ path: '/' })" size="large" key="name" class="mx-1"
            :type="route.matched[1].path == '/home' ? 'danger' : 'success'">
            首页
        </el-tag>
        <el-tag @click="onClick(tag)" @close="onClose(tag)" size="large" v-for="tag in tagsStore.gettags"
            :key="tag.name" class="mx-1" closable :type="route.matched[1].path == tag.path ? 'danger' : 'success'">
            {{ tag.lable }}
        </el-tag>
    </div>
</template >

<style lang="less">
.header {

    height: 60px;
    line-height: 60px;

    .el-page-header__header {
        display: flex;

        .el-page-header__extra {
            display: flex;
            align-items: center;

            .items-center {
                display: flex;
                align-items: center;

                .el-icon {
                    margin-right: 10px;
                }

                .el-dropdown {
                    .el-dropdown-link {
                        display: flex;
                        align-items: center;

                        .el-avatar {
                            margin-right: 10px;
                            position: relative;
                            bottom: 2px;
                        }
                    }
                }
            }
        }
    }

    .el-page-header__title {
        display: none;
    }
}

.tags {
    margin-top: 20px;
    margin-bottom: 20px;

    .el-tag {
        margin-right: 20px;
    }
}
</style>
